<template>
  <div class="event-list">
    <el-container>
      <el-header style="">
<i class="el-icon-arrow-left" @click="$router.go(-1)"></i>
<i class="el-icon-arrow-left" @click="$router.go(-1)"></i>
        事件描述：设备异常
      </el-header>
      <el-main>
        <!-- 左侧行为样式 -->
        <div class="main-left">
          <div style="font-size: 20px; font-weight: 700; margin-bottom: 20px">
            行为
          </div>
          <el-table
            v-loading="loading"
            :data="roleList"

            :header-cell-style="{ background: '#F3F5FC' }"

          >
            <el-table-column label="行为" prop="name" />
            <el-table-column
              label="行为级别"
              prop="level"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
         <span  class="Inspan" :class="scope.row.level == '一般'?'simple':scope.row.level == '较大'?'big':scope.row.level == '重大'?'major':'serious'">{{
              scope.row.level
            }}</span>
              </template>
            </el-table-column>
            <el-table-column label="标识符" prop="label" />

            <el-table-column label="行为分类" prop="classify" />
          </el-table>
        </div>
        <!-- 右侧流程图 -->
        <div class="main-right">
          <div>
            <div class="progress">
              <span>发送</span>
              <div class="line"></div>
              <el-button type="primary">张三</el-button>
            </div>
            <div class="progress" style="padding-left: 12px;">
              <span>交换机</span>
              <div class="line"></div>
              <el-button type="primary">互联网</el-button>
            </div>
            <!--<div class="progress">
              <span>接收</span>
              <div class="line"></div>
              <el-button type="primary">王五</el-button>
            </div>-->
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading:false,
      roleList: [
        {
          name: "违规外联事件",
          level: "重大",
          label: "11003",
          classify: "用户违规",
          desc: "网络攻击",
          auto: "否",
          send: "否",
        }
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.event-list {
  width: 100%;
  height: 100%;
  .el-container {

    width: 100%;
    height: 100%;
    .el-header {
      border: 1px solid #d7d7d7;
      border-bottom: none;
          position: relative;
      height: 100px !important;
      padding: 30px;
      text-align: center;
      font-size: 30px;
      font-weight: 700;
      background-color: #e9edfb;
     i{
        position: absolute;
        left: 10px;
        top:50%;
        transform: translateY(-50%);
      }
    }
    .el-main {
      width: 100%;
      height: 100%;
      display: flex;
        border: 1px solid #d7d7d7;
        border-top: none;
      justify-content: space-between;
      .main-left {
        width: 55%;
        border: 1px solid #d7d7d7;
        padding: 10px;
        border-radius: 10px;
      }
      .main-right {
        width: 40%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: 1px solid #d7d7d7;
        border-radius: 10px;
      }
    }
  }

  .progress {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: 100px;
    .line {
      width: 200px;
      margin-left: 3px;
      border: 1px solid #53badc;
    }
    span {
      position: relative;
      &::before {
        content: "";
        width: 1px;
        height: 100px;
        border: 1px solid #53badc;
        position: absolute;
        left: 50%;
        top: 120%;
        transform: translateX(-50%);
      }
    }
    &:nth-of-type(2) {
      span {
        padding: 10px 20px;
        border: 1px solid #d7d7d7;
        border-radius: 6px;
        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 0;
          height: 0;
          border: 10px solid #169bd5;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-bottom: 10px solid transparent;
        }
      }
      .line {
        position: relative;
        &::before {
          content: "发送";
          position: absolute;
          left: 50%;
          padding: 6px;
          transform: translateX(-50%) translateY(-50%);
          background-color: #fff;
        }
      }
      .el-button{
        position: relative;
          &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 0;
          transform: translate(-50%, -50%);
          width: 0;
          height: 0;
          border: 10px solid #169bd5;
          border-top: 10px solid transparent;
          border-right: 10px solid transparent;
          border-bottom: 10px solid transparent;
        }
      }
    }
    &:nth-of-type(2) {
      margin-bottom: 0;
      span {
        &::before {
          content: "";
          width: 0;
          height: 0;
          border: none;
        }
      }
          .el-button{
        position: relative;
          &::before {
          content: "";
          position: absolute;
          top: 50%;
          left: 0;
          transform: translate(-50%, -50%);
          width: 0;
          height: 0;
          border: 10px solid #169bd5;
          border-top: 10px solid transparent;
          border-right: 10px solid transparent;
          border-bottom: 10px solid transparent;
        }
      }
    }
  }
}
</style>
